<nz-page-header nzGhost="false">
    <nz-page-header-title>命名空间管理</nz-page-header-title>
    <nz-page-header-subtitle>Materal-ConfigCenter</nz-page-header-subtitle>
    <nz-page-header-extra>
        <nz-button-group>
            <button nz-button [disabled]="dataLoading || !selectProjectID" (click)="openDrawer(null)" title="新增命名空间"><i nz-icon nzType="plus"></i></button>
        </nz-button-group>
    </nz-page-header-extra>
    <nz-page-header-content>
        <form nz-form [formGroup]="searchModel" autocomplete="off">
            <div nz-row nzGutter="24">
                <nz-form-item nz-col nzSpan="6">
                    <nz-form-control>
                        <input type="search" nz-input placeholder="名称" formControlName="name" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-col nzSpan="6">
                    <nz-form-control>
                        <input type="search" nz-input placeholder="描述" formControlName="description" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-col nzSpan="2">
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="search()" title="查询"><i nz-icon nzType="search"></i></button>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </form>
    </nz-page-header-content>
</nz-page-header>
<div nz-row>
    <div nz-col nzSpan="4">
        <nz-radio-group [(ngModel)]="selectProjectID" (ngModelChange)="selectProject()">
            <nz-list [nzDataSource]="projectData" nzBordered nzHeader="项目列表" [nzRenderItem]="projectItem">
                <ng-template #projectItem let-item>
                    <nz-list-item>
                        <label class="ellipsis" nz-radio [nzValue]="item.ID" [title]="item.Name+'['+item.Description+']'">{{item.Name}}[{{item.Description}}]</label>
                    </nz-list-item>
                </ng-template>
            </nz-list>
        </nz-radio-group>
    </div>
    <div nz-col nzSpan="20">
        <nz-table #filterTable nzFrontPagination="false" [nzData]="tableData" [nzLoading]="dataLoading">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>描述</th>
                    <th nzWidth="100px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of tableData">
                    <td>{{ data.Name }}</td>
                    <td>{{ data.Description }}</td>
                    <td>
                        <nz-button-group>
                            <button nz-button (click)="openDrawer(data.ID)" title="编辑"><i nz-icon nzType="edit"></i></button>
                            <button nz-button nzType="danger" title="删除" nz-popconfirm nzPopconfirmTitle="确认删除该命名空间吗？" nzPopconfirmPlacement="top" (nzOnConfirm)="deleteNamespace(data.ID)"><i nz-icon nzType="delete"></i></button>
                        </nz-button-group>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
</div>
<nz-drawer [nzWidth]="720" [nzVisible]="drawerVisible" [nzTitle]="isAdd?'添加命名空间':'修改命名空间'" (nzOnClose)="closeDrawer()">
    <app-namespace-edit #namespaceEditComponent [projectID]="selectProjectID" (saveEnd)="saveEnd($event)"></app-namespace-edit>
</nz-drawer>